<!DOCTYPE html>
<html lang="en">

<head>
    <title>日历</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="../../common/sui.css">
    <style type="text/css">
        body {
            background: #eee;
            width: 100%;
        }

        .sg-calendar,
        .sg-calendar * {
            margin: 0;
            padding: 0;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        /*calendar*/
        .sg-calendar {
            background: #009688;
            font-family: "microsoft yahei";
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
            display: inline-block;
            border-radius: 2px;
            overflow: hidden;
            margin: 10px;
        }

        .calendar {
            color: #333;
        }

        .calendar .calendar-header {
            background: rgba(0, 0, 0, .7);
        }

        .calendar .calendar-header,
        .calendar .calendar-body,
        .calendar .calendar-tool {
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
            display: -webkit-flex;
            -webkit-box-align: center;
            -webkit-box-lines: multiple;
            flex-wrap: wrap;
            -webkit-flex-wrap: wrap;
            justify-content: space-between;
            -webkit-justify-content: space-between;
            -webkit-align-items: center;
            align-items: center;
        }

        .calendar .calendar-body .item,
        .calendar .calendar-header .item {
            text-align: center;
        }

        .calendar .calendar-header .item {
            height: 2rem !important;
            line-height: 2rem !important;
            color: #fff;
        }

        .calendar .calendar-body {
            /*padding: .5rem 0;*/
            background: #fff;
        }

        .calendar .calendar-body .item.current {
            background-color: #E2E2E2;
            color: #666;
        }

        .calendar .calendar-body .item.selected {
            color: #fff;
            background: #1ABC9C;
        }

        .calendar .calendar-body .pass,
        .calendar .calendar-body .future {
            color: #999 !important;
        }

        .calendar .calendar-body .item {
            cursor: pointer;
            /*border-radius: 50%;*/
            color: #333;
            background: rgba(78, 178, 207, 0);
            border-right: 1px solid #f0f0f0;
            border-bottom: 1px solid #f0f0f0;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-transition: all .25s;
            transition: all .25s;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        .calendar .calendar-tool {
            position: relative;
            padding: 20px 15px 19px;
            color: #fff;
        }

        .calendar .calendar-tool .calendar-week {
            width: 3.5rem;
        }

        .calendar .calendar-tool .calendar-select {
            display: -moz-box;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            display: -webkit-flex;
            flex-wrap: wrap;
            -webkit-flex-wrap: wrap;
            -webkit-box-lines: multiple;
        }

        .calendar .calendar-tool .calendar-select .calendar-select-prev,
        .calendar .calendar-tool .calendar-select .calendar-select-next {
            color: #fff;
            display: inline-block;
            width: 2rem;
            height: 2rem;
            text-align: center;
            cursor: pointer;
            line-height: 2rem;
            border-radius: 50%;
        }

        .calendar .calendar-tool .calendar-select .calendar-select-prev:hover,
        .calendar .calendar-tool .calendar-select .calendar-select-next:hover {
            color: #009688;
            background: #fff;
        }

        .calendar .calendar-tool .calendar-today {
            font-size: 1.5rem;
        }
    </style>
</head>

<body>
    <div class="sg-calendar">
        <div class="calendar" style="width: 500px;">
            <div class="calendar-tool">
                <div class="calendar-select" v-on:click="prev()">
                    <div class="calendar-select-prev"><i class="sui-icon icon-tb-back"></i></div>
                </div>
                <div class="calendar-today">{{date.year}}-{{date.month}}-{{date.day}}</div>
                <div class="calendar-select" v-on:click="next()">
                    <div class="calendar-select-next"><i class="sui-icon icon-tb-right"></i></div>
                </div>
            </div>
            <div class="calendar-header">
                <div class="item" style="width: 71px;" v-for="day in week">{{day}}</div>
            </div>
            <div class="calendar-body">
                <div class="item pass" style="width: 71px;height: 71px;line-height: 71px;" v-for="day in prevDay"
                    :data-value="prevDate.year+'-'+prevDate.month+'-'+(prevDate.monthDay-prevDay+day)" :data-year="prevDate.year"
                    :data-month="prevDate.month" :data-day="prevDate.monthDay-prevDay+day">{{prevDate.monthDay-prevDay+day}}</div>
                <div class="item" style="width: 71px;height: 71px;line-height: 71px;" v-for="day in date.monthDay"
                    :class="{current:initDate.year==date.year&&initDate.month==date.month&&initDate.day==day,selected:initDate.year==date.year&&initDate.month==date.month&&initDate.day==day}"
                    :data-value="date.year+'-'+date.month+'-'+day" :data-year="date.year" :data-month="date.month"
                    :data-day="day">{{day}}</div>
                <div class="item pass" style="width: 71px;height: 71px;line-height: 71px;" v-for="day in nextDay"
                    :data-value="nextDate.year+'-'+nextDate.month+'-'+day" :data-year="nextDate.year" :data-month="nextDate.month"
                    :data-day="day">{{day}}</div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="../common/jquery.min.js"></script>
    <script type="text/javascript" src="https://unpkg.com/vue@2.2.6/dist/vue.min.js"></script>
    <script type="text/javascript">
        var nowDate = new Date();
        var prevDate = new Date((new Date()).setMonth((new Date()).getMonth() - 1));
        var nextDate = new Date((new Date()).setMonth((new Date()).getMonth() + 1));
        var vm = new Vue({
            el: '.sg-calendar',
            data: {
                week: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
                initDate: {},
                date: {},
                prevDate: {},
                nextDate: {},
                prevDay: 1,
                nextDay: 1,
                prevMonthDay: 0
            },
            mounted: function () {
                var _this = this;
                _this.init();
                $(document).on("click", ".calendar-body .item", function () {
                    if (!$(this).hasClass('pass')) {
                        $(this).addClass('selected').siblings().removeClass('selected');
                        _this.date.day = parseInt($(this).attr("data-day"));
                    }
                });
            },
            methods: {
                getMonthDay: function (year, month) {
                    var curDate = new Date();
                    curDate.setFullYear(year);
                    curDate.setMonth(month);
                    curDate.setDate(0);
                    var dd = curDate.getDate();
                    curDate.setDate(1);
                    var item = curDate.getDay();
                    curDate.setDate(dd);
                    var item2 = curDate.getDay() + 1;
                    if (item == 0) {
                        item = 7;
                    };
                    return {
                        "total": dd,
                        "prevDay": item,
                        "nextDay": item2,
                    };
                },
                init: function () {
                    var _this = this;
                    _this.initDate = {
                        year: nowDate.getFullYear(),
                        month: nowDate.getMonth() + 1,
                        monthDay: (_this.getMonthDay(nowDate.getFullYear(), nowDate.getMonth() + 1)).total,
                        day: nowDate.getDate()
                    }
                    _this.prevDate = {
                        year: prevDate.getFullYear(),
                        month: prevDate.getMonth() + 1,
                        monthDay: (_this.getMonthDay(prevDate.getFullYear(), prevDate.getMonth() + 1)).total,
                        day: prevDate.getDate()
                    }
                    _this.nextDate = {
                        year: nextDate.getFullYear(),
                        month: nextDate.getMonth() + 1,
                        monthDay: (_this.getMonthDay(nextDate.getFullYear(), nextDate.getMonth() + 1)).total,
                        day: nextDate.getDate()
                    }
                    _this.drawDate(_this.initDate);
                },
                prev: function () {
                    var _this = this;
                    _this.date = p(_this.date);
                    _this.prevDate = p(_this.prevDate);
                    _this.nextDate = p(_this.nextDate);
                    _this.drawDate(_this.date);
                    function p(date) {
                        date.month--;
                        if (date.month <= 0) {
                            date.year--;
                            date.month = 12;
                        }
                        return date;
                    }
                },
                next: function () {
                    var _this = this;
                    _this.date = n(_this.date);
                    _this.prevDate = n(_this.prevDate);
                    _this.nextDate = n(_this.nextDate);
                    _this.drawDate(_this.date);
                    function n(date) {
                        date.month++;
                        if (date.month >= 13) {
                            date.year++;
                            date.month = 1;
                        }
                        return date;
                    }
                },
                drawDate: function (date) {
                    $(".calendar-body .item").removeClass('selected');
                    var _this = this;
                    _this.date = {
                        year: date.year,
                        month: date.month,
                        monthDay: (_this.getMonthDay(date.year, date.month)).total,
                        day: _this.initDate.day
                    }
                    _this.prevDay = (_this.getMonthDay(_this.date.year, _this.date.month)).prevDay;
                    _this.nextDay = 7 - (_this.getMonthDay(_this.date.year, _this.date.month)).nextDay;
                }
            }
        });
    </script>
    <script type="text/javascript">
        $(function () {
            window.Calendar = function (container, params) {//container容器, params属性
                params = params || {};
                var options = {
                    container: container,
                    width: window.innerWidth
                };
                var c = this;
                c.year = 0;
                c.month = 0;
                var week = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];

            }
        });
        function getMonthDay(year, month) {//获取当月有多少天,当月第一天是星期几
            var curDate = new Date();
            curDate.setFullYear(year);
            curDate.setMonth(month);
            curDate.setDate(0);
            var dd = curDate.getDate();
            curDate.setDate(1);
            var item = curDate.getDay();
            if (item == 0) {
                item = 7;
            };
            return {
                "total": dd,
                "day": item
            };
        }
        function drawCalendar(year, month) {
            var date = new Date();
            var itemWidth = 500;
        }
// console.log(getMonthDay(2017,2));
    </script>
</body>

</html>